<template>
  <!-- <div class="content-box">
  <common-header :title="title"></common-header>-->
  <div class="page-content">
    <van-field
      v-model="realname"
      type="text"
      clearable
      label="开户人姓名"
      placeholder="请输入开户人姓名"
      required
      disabled
    />
    <van-field
      v-model="bankname"
      clearable
      type="text"
      label="所属银行"
      placeholder="请输入所属银行"
      required
      error-message-align="right"
      :disabled="isDisabled"
      :error-message="banknameMessage"
    />
    <van-field
      v-model="bankid"
      clearable
      type="number"
      label="银行卡号"
      placeholder="请输入银行卡号"
      required
      error-message-align="right"
      :error-message="bankidMessage"
      :disabled="isDisabled"
    />
    <van-field
      v-model="banksite"
      type="text"
      clearable
      label="开户网点"
      placeholder="请输入开户网点"
      required
      error-message-align="right"
      :error-message="banksiteMessage"
      :disabled="isDisabled"
    />
    <div class="btnPay" @click="finish()" v-if="!isDisabled">完善信息</div>
    <!-- <div class="btnPay" @click="abled()" v-else>编辑信息</div> -->
    <div class="care">您绑定银行卡的开户名必须与您认证的实名一致，否则将无法成功提现。</div>
    <commonFooter></commonFooter>
  </div>
  <!-- </div> -->
</template>
<script>
import { commonFooter } from "common";
import { patternBank } from "@/utils/regRex";
import { bindBankApi } from "@/api/user";
import { createNamespacedHelpers } from "vuex";
let { mapGetters, mapState } = createNamespacedHelpers("user");
export default {
  name: "myBankcard",
  components: {
    commonFooter
  },
  computed: {
    ...mapGetters(["bank"]),
    ...mapState(["realname"])
  },
  mounted() {
    this.accname = this.bank.accname;
    this.bankname = this.bank.bankname;
    this.bankid = this.bank.bankid;
    this.banksite = this.bank.banksite;
    if (this.accname) {
      this.isDisabled = true;
    }
  },
  methods: {
    abled() {
      this.isDisabled = false;
    },
    finish() {
      let _this = this;
      this.banknameMessage = "";
      this.bankidMessage = "";
      this.banksiteMessage = "";

      if (!this.bankname) {
        this.banknameMessage = "开户银行不能为空";
      }
      if (!this.banksite) {
        this.banksiteMessage = "开户网点不能为空";
      }
      if (!this.bankid) {
        this.bankidMessage = "银行卡号不能为空";
      } else if (!patternBank.test(this.bankid)) {
        this.bankidMessage = "请输入正确的银行卡号";
      } else if (this.bankname && this.banksite) {
        bindBankApi({
          accname: this.realname,
          bankname: this.bankname,
          bankid: this.bankid,
          banksite: this.banksite
        }).then(res => {
          this.$toast({
            message: res.msg,
            duration: 500,
            onClose: function() {
              if (_this.$route.query.redirect) {
                _this.$router.push({ path: _this.$route.query.redirect });
              } else {
                _this.$router.push({
                  path: "/user"
                });
              }
            }
          });
        });
      }
    }
  },
  data() {
    return {
      title: "新增银行卡",
      isDisabled: false,
      accname: "",
      accnameMessage: "",
      bankname: "",
      banknameMessage: "",
      bankid: "",
      bankidMessage: "",
      banksite: "",
      banksiteMessage: ""
    };
  }
};
</script>
<style lang="less" scoped>
@import "~styles/variable.less";
</style>